/* eslint-disable import/first */
/*
 * @Author: your name
 * @Date: 2021-10-11 21:00:32
 * @LastEditTime: 2021-11-08 22:47:09
 * @LastEditors: Shentong
 * @Description: 意见反馈
 * @FilePath: /distribution/src/pages/collect/index.tsx
 */
import React, { useEffect, useState  } from 'react';
import Taro, { render } from '@tarojs/taro';
import { View, Image, } from "@tarojs/components";

import { AtTextarea, AtInput } from 'taro-ui'

import styles from './index.module.scss'
import phoneIcon from '@/src/assets/icon/phone.png'

import {postFeedback, imageUpload} from '@/api/my'
import { showToast } from '@/utils/index'


const opinion = () => {
    const [option, setOption] = useState<string>('')
    const [cellPhone, setcellPhone] = useState<string>('')
    const [optionImagePath, setOptionImagePath] = useState<string>('')

    const handleChange = (val) => {
        setOption(val)
    }
    const handleChangeInput = (value) => {
        setcellPhone(value)
    }
    const subClick = () =>{
        if (!option) {
          return showToast('请填写您的意见~')
        }
        if (!cellPhone) {
          return showToast('请填写您的手机号~')
        } else if (!/^1[3456789]\d{9}$/.test(cellPhone)) {
          return showToast('请填写正确的手机号~')
        }
        const params = {
            option,
            cellPhone,
            optionImagePath
        }
        postFeedback(params).then(res => {
            if (res.code == "00000-00000") {
                Taro.showToast({title: '评价成功'})
            }
        })
    }
    const imageChange = () => {
        // imageUpload
        Taro.chooseImage({
            count:1,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera',],
            success: function (res) {
                setOptionImagePath(res.tempFiles[0].path)
            }
        })
    }
    return (
        <View className={styles.opinion}>
            <View className={styles.content}>
                <AtTextarea
                  value={option}
                  maxLength={200}
                  onChange={handleChange}
                  height={400}
                  placeholder='你的问题是...'
                  className={styles.textA}
                />

                {
                    optionImagePath?
                    <Image  className={styles.iphone} style='width: 40px;height: 40px;'  onClick={imageChange} src={optionImagePath} /> :
                    <Image  className={styles.iphone} style='width: 40px;height: 40px;'  onClick={imageChange} src={phoneIcon} />
                }

            </View>

            <View className={styles.lixin}>
                <AtInput
                  name='value'
                  title='联系方式'
                  type='phone'
                  border={false}
                  placeholder='请留下您的手机号码，方便与您联系'
                  value={cellPhone}
                  onChange={handleChangeInput}
                  className={styles.moblie}
                />

            </View>

            <View className={styles.sub} onClick={subClick}>提交</View>
        </View>
    )
}

export default opinion
